import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch, useLocation } from 'react-router-dom';
import { Breadcrumb } from 'antd';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;
const App = () => {
    const location = useLocation();
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    return (
        <Router>
            <Breadcrumb>
                <Breadcrumb.Item>
                    <Link to="/">Home</Link>
                </Breadcrumb.Item>
                {pathSnippets.map((snippet, index) => {
                    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; const name = snippet.charAt(0).toUpperCase() + snippet.slice(1);
                    return (<Breadcrumb.Item key={url}> <Link to={url}>{name}</Link> </Breadcrumb.Item>);
                })}
            </Breadcrumb>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </Router>);
};
export default App;